{% extends "dash/base.html" %}
{% block content %} 

<div id='top_ip'>
<div id='chart1'>
		      </div> 
 <table id='t3'>
                      <thead>
          		    <tr>
              			
                                <th>dstip</th>
				<th>bytes</th>
                           </tr>
                      </thead>
                      <tbody>
         		   {% for item in slist3 %}
                           <tr>
             			
             	                <td>{{ item.dstip}}</td>
				<td>{{ item.tot_bytes}}</td>
             	                
           		   </tr>
                           {% endfor %}

          	      </tbody>

                      </table>
</div>
<script>
 $('#initial').hide();
  $('#timedisp').hide();
  $('#protdisp').hide();
  $('#srch').hide();
  $('#outtraffic').hide();
  $('#atck').hide();
 $('#intraffic').show();
function in_bytes()
       {
             $('#chart1').empty();
             var data2 = [{% for item in slist3 %}
                                    { "dstip" : "{{ item.dstip }}",
                                      "bytes" :"{{ item.tot_bytes }}",
                                    },
                                    {% endfor %}
                                   ];
           
           var margin = {top: 40, right: 40, bottom: 40, left:70},
           width = 1200,
           height = 800;
 
           var x = d3.scale.ordinal()
                      .rangePoints([0, width - margin.left - margin.right]);
            var y = d3.scale.linear()
                      .domain([0, d3.max(data2, function(d) { return d.bytes; })])
                      .range([height - margin.top - margin.bottom, 0]);
	    x.domain(data2.map(function(d) { return d.dstip; }));
	    var xAxis = d3.svg.axis()
                              .scale(x)
                              .orient("bottom");
            var yAxis = d3.svg.axis()
                          .scale(y)
                          .orient('left')
                          .tickPadding(10);
	    var svg = d3.select('#chart1').append('svg')
    			.attr('class', 'chart')
    			.attr('width', width)
    			.attr('height', height)
  			.append('g')
    			.attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');
	    svg.selectAll('.chart')
               .data(data2)
               .enter().append('rect')
               .attr('class', 'bar')
               .attr('x', function(d) { return x(d.dstip); })
    	       .attr('y', function(d) { return height - margin.top - margin.bottom - (height - margin.top - margin.bottom - y(d.bytes)) })
    	       .attr('width', 10)
               .attr('height', function(d) { return height - margin.top - margin.bottom - y(d.bytes) });

             svg.append("text")      // text label for the x axis
                .attr("x", width/2 )
                .attr("y",  (height-margin.top) )
                .style("text-anchor", "middle")
                .text("IP Addresses");
	    svg.append('g')
               .attr('class', 'x axis')
               .attr('transform', 'translate(0, ' + (height - margin.top - margin.bottom) + ')')
               .call(xAxis);
            svg.append("text")
               .attr("class", "y label")
               .attr("text-anchor", "middle")
               .attr("y", -20)
               .attr("dy", "1em")
               .attr("transform", "rotate(-90)")
               .text("bytes");
            svg.append('g')
               .attr('class', 'y axis')
               .call(yAxis);
            
       }
in_bytes();
</script>
{% endblock %}
